<script setup>
import { ref} from 'vue';
import {useStore} from 'vuex'

const store =  useStore()
const isLogin =ref(false)
isLogin.value = store.getters.isLogin

//开关
const boardChecked = ref(false);
const buttonChecked = ref(false);


// 弹出框
const boardShow = ref(false)
const temShow =ref(false)
const boradClick = function () {
    boardShow.value = true
}
const temClick=function(){
    temShow.value= true
}

// 输入框
const boardValue = ref('')
const temValue =ref('')

// 动作面板
const actionsShow = ref(false)
const actions = [
    { name: '摄氏度' },
    { name: '华氏度' }];
const actionsClick = function () {
    actionsShow.value = true
}


</script>
<template>
    <div class="nav"></div>
    <div class="main">
        <van-sticky>
            <div class="grid">
                <van-cell is-link  center v-if="isLogin" to="set" >
                    <template #title>
                        <van-image round width="80px" height="80px"
                            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                        <span class="custom-title">{{store.state.userInfo.username}}</span>
                    </template>
                </van-cell>
                <van-cell is-link to="login" center v-else>
                    <template #title>
                        <van-image round width="80px" height="80px"
                            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                        <span class="custom-title"> 未登录</span>
                    </template>
                </van-cell>
            </div>
        </van-sticky>
        <main>
            <van-space direction="vertical" fill class="cells">
                <van-cell :border="false" icon="location-o" title="语音播报">
                    <van-switch v-model="boardChecked" size="22px" />
                </van-cell>
                <div>
                    <van-cell :border="false" icon="location-o" title="编辑语音播报" value="例：当前测温" is-link
                        @click="boradClick" />
                    <van-popup v-model:show="boardShow">
                        <van-cell-group inset>
                            <h6>编辑语音播报</h6>
                            <van-field v-model="boardValue" placeholder="例：测量结果" class="input" />
                            <van-row gutter="20">
                                <van-col span="12">
                                    <van-button type="primary" block class="btn">取消</van-button>
                                </van-col>
                                <van-col span="12">
                                    <van-button type="primary" block class="btn">确认</van-button>
                                </van-col>
                            </van-row>
                        </van-cell-group>
                    </van-popup>
                </div>
                <van-cell :border="false" icon="location-o" title="按钮音提示">
                    <van-switch v-model="buttonChecked" size="22px" />
                </van-cell>
                <van-cell-group>
                    <van-cell title="测温单位" value="摄氏度" icon="location-o" is-link @click="actionsClick" />
                    <van-action-sheet v-model:show="actionsShow" :actions="actions" cancel-text="取消"
                        close-on-click-action />
                    <van-cell :border="false" icon="location-o" title="温度报警值" value="37.3℃" is-link @click="temClick" />
                    <van-popup v-model:show="temShow">
                        <van-cell-group inset>
                            <h6>温度报警值</h6>
                            <van-field v-model="temValue" placeholder="温度报警值" class="input" />
                            <van-row gutter="20">
                                <van-col span="12">
                                    <van-button type="primary" block class="btn">取消</van-button>
                                </van-col>
                                <van-col span="12">
                                    <van-button type="primary" block class="btn">确认</van-button>
                                </van-col>
                            </van-row>
                        </van-cell-group>
                    </van-popup>
                </van-cell-group>
                <van-cell title="更换测温背景" icon="location-o" is-link />
                <van-cell-group>
                    <van-cell title="产品ID" value="未连接" icon="location-o" />
                    <van-cell title="固件版本" value="未连接" icon="location-o" />
                </van-cell-group>
                <van-cell title="关于" is-link icon="location-o" />
                <van-button type="primary" block round class="end">还原出厂设置</van-button>
            </van-space>
        </main>
    </div>
</template>
<style scoped>
.nav {
    height: 100px;
    background-color: skyblue;
    overflow: hidden;
}

.grid {
    height: 100px;
    margin: 0 10px;
    position: relative;
    top: -45px;
    background-color: #fff;
}

.custom-title {
    position: relative;
    left: 20px;
    top: -28px;
}

.main {
    background-color: #ccc;
}

.main .cells {
    position: relative;
    top: -29px;
    margin: 0 10px;
}

h6 {
    margin: 0;
    text-align: center
}

.input {
    width: 200px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.btn {
    border-radius: 20px;
    height: 30px;
    margin: 7px 0;
}

.end {
    margin-bottom: 25px;
}
</style>